// 友情链接js
let form = layui.form;
// 数据渲染页面
function rendLinkInfo() {
  $.ajax({
    url:'admin/links',
    success: function (res) {
      let table = template('table-tpl',res);
      $('.layui-table tbody').html(table);
    }
  })
}

rendLinkInfo();

// -----------------------------添加链接
$('#add-link').on('click', function () {
  // 弹层
  let index = layer.open({
    type: 1, 
    title:'添加友情链接',
    area: ['500px', '350px'],
    content: $('#add-form-tpl').html()
  });
  // 上传图片按钮事件
  // $('#urlIcon'). on('click', function () {
  //   $('#linkFile').on('click');
  // })
  $('#urlIcon').click(function () {
    $('#linkFile').click()
  })
  // 监听文件选中事件
  $('#linkFile').on('change', function (e) {
    // 读取选择图片
    // let fileObj = this.files[0];
    // 给图片生成临时URL
    const objURL = URL.createObjectURL(e.target.files[0]);
    // 把临时链接放到img显示区
    $('#preIcon').attr('src', objURL);
  })

  // 提交按钮
  $('#add-form').on('submit', function (e) {
    e.preventDefault();
    let fData = new FormData(this);
    $.ajax({
      url:'admin/links',
      type:'POST',
      data:fData,
      processData: false,
      contentType: false,
      success: function (res) {
        if (res.status === 0) {
          layer.msg(res.message);
          layer.close(index);
          rendLinkInfo();

        }
      }
    })
  })

})

// --------------------------编辑按钮
  $('.layui-table tbody').on('click', '.edit', function (e) {
    var id = $(e.target).data('id');
    $.ajax({
    url: 'admin/links/' + id,
    success: function (res) {
      let index = layer.open({
        type: 1, 
        title:'编辑友情链接',
        area: ['500px', '350px'],
        content: $('#edit-form-tpl').html()
      });
      $('#preIcon').attr('src','http://localhost:8888/uploads/' + res.data.linkicon);
      delete res.data.linkicon;
      form.val('editForm',res.data);

      $('#urlIcon').click(function () {
        $('#linkFile').click()
      })

    // 上传图片
    // let fl = null;
    $('#linkFile').change(function (e) {
      // fl = e.target.files[0];
      // console.log(fl);
      let objURL = URL.createObjectURL(e.target.files[0]);
      $('#preIcon').attr('src',objURL);
    })

    $('#edit-form').submit(function (e) {
      e.preventDefault();

      var fd = new FormData(this);
      
      // if (fl) {
      //   fd.append('linkicon',fl)
      //   // console.log(fd);
      // }
      // fd.forEach((val,key) => {console.log(key,val);})
      
      $.ajax({
        type: 'put',
        url: 'admin/links/' + id,
        data: fd,
        processData: false,
        contentType: false,
        success: function (res) {
          if (res.status === 0) {
            // 编辑完成
            layer.close(index)
            rendLinkInfo();
        }
      }
    })
  })
}
})
})

// -----------------------删除
$('.layui-table tbody').on('click', '.delete', function (e) { 
  var id = $(e.target).data('id')
  layer.confirm('确实要删除吗？', function (index) {
    $.ajax({
      type: 'delete',
      url: 'admin/links/' + id,
      success: function (res) {
        if (res.status === 0) {
          // 删除成功
          layer.close(index)
          rendLinkInfo();
        }
      }
    })
  })
})




  
